<template>
  <!-- 系统字典 表单 -->
  <div v-if="crud.status.cu > 0">
    <el-drawer
      :title="crud.status.title"
      :visible.sync="crud.status.cu > 0"
      direction="rtl"
      :before-close="crud.cancelCU"
      :wrapper-closable="false"
      size="350px"
    >
      <div class="leisure-drawer__content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          size="small"
          label-width="90px"
        >

          <el-form-item label="字典标识" prop="dictLabel">
            <el-input v-model="form.dictLabel" placeholder="请输入字典标识（所属字典）" clearable :readonly="dictType === 1" />
          </el-form-item>
          <div v-if="addChildDict">
            <el-form-item label="上级索引">
              <el-input v-model="parentInfo.key" clearable :readonly="true" :disabled="true" />
            </el-form-item>
            <el-form-item label="上级字典值">
              <el-input v-model="parentInfo.value" clearable :readonly="true" :disabled="true" />
            </el-form-item>
          </div>
          <div v-if="dictType === 1">
            <el-form-item label="索引" prop="key">
              <el-input v-model="form.key" placeholder="请输入索引值" clearable />
            </el-form-item>
            <el-form-item label="字典值" prop="value">
              <el-input v-model="form.value" placeholder="请输入索引值对应名称" clearable />
            </el-form-item>
          </div>
          <div v-if="dictType === 0">
            <el-form-item label="字典名称" prop="value">
              <el-input v-model="form.value" placeholder="请输入字典名称" clearable />
            </el-form-item>
            <!-- 字典分组 -->
            <el-form-item label="字典分组" prop="parentId">
              <treeselect
                v-model="form.dictGroupId"
                :options="dictGroupTree"
                :show-count="true"
                placeholder="可根据分组名称搜索"
                no-results-text="未找到匹配项"
                no-options-text="没有可用字典分组"
                :normalizer="normalizer"
                :default-expand-level="1"
              />
            </el-form-item>

          </div>
          <el-form-item
            label="排序"
            prop="paixu"
          >
            <el-input-number
              v-model.number="form.paixu"
              :min="0"
              :max="999"
              controls-position="right"
            />
          </el-form-item>
          <!-- 父类值 -->
          <el-form-item label="描述" prop="description">
            <el-input
              v-model="form.description"
              placeholder="请输入描述"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 6}"
              clearable
            />
          </el-form-item>
          <div v-if="form.id !== null && form.id !== ''&& dictType === 0">
            <el-form-item label="更新下级" prop="needUpdateSubLabel">
              <el-radio-group v-model="form.needUpdateSubLabel">
                <el-radio :label="true">更新字典详情标识</el-radio>
                <el-radio :label="false">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

        </el-form>

        <div class="leisure-drawer__footer">
          <el-button
            @click="crud.cancelCU"
          >
            取消
          </el-button>
          <el-button
            :loading="crud.status.cu === 2"
            type="primary"
            @click="crud.submitCU"
          >
            确认
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import CRUD, { form } from '@crud/crud'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { tree } from '@/api/sys/DictGroup'
// 字典分组 - model
// 系统字典
const defaultForm = {
  id: null, // id
  dictLabel: null, // 字典标识（所属字典）
  key: null, // 索引值
  value: null, // 索引值对应名称
  paixu: 1,
  parentId: '0',
  description: null, // 描述
  dictType: null, // 字典类型 默认0：字典，1：字典详情
  depId: null, // 部门id
  status: 1,
  needUpdateSubLabel: true,
  dictGroupId: null,
  lockVersion: 0

}
export default {
  components: {
    Treeselect
  },
  mixins: [form(defaultForm)],
  props: {
    dictType: {
      type: Number, // 字典类型
      default: () => { return 0 }
    },
    dictLabel: {
      type: String, // 字典标识
      default: () => { return null }
    },
    parentId: {
      type: String, // 上级id
      default: () => { return '0' }
    }
  },

  data() {
    return {
      addChildDict: false,
      parentInfo: {},
      dictGroupTree: [],
      normalizer(node) {
        // 去掉children=[]的children属性 respectively
        if (node.children && !node.children.length) {
          delete node.children
        }
        if (node.name) {
          node.label = node.name
        }
      },
      rules: {
        paixu: [
          { required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
        ]
      }
    }
  },
  mounted() {
  },
  methods: {
    [CRUD.HOOK.afterToAdd]() {
      this.form.dictType = this.dictType
      this.form.parentId = this.parentId
      if (this.dictLabel) {
        this.form.dictLabel = this.dictLabel
      }
      if (this.dictType === 0) { // 字典类型
        this.form.key = 'dict_label'
      }
      // 如果是在某个详情项目继续添加子项详情
      if (this.addChildDict) {
        this.form.parentId = this.parentInfo.id
      }
      return true
    },
    [CRUD.HOOK.beforeToCU]() {
      this.getdictGroupTree()
    },
    [CRUD.HOOK.beforeAddCancel]() { // 添加取消之前
      this.addChildDict = false
      this.parentInfo = {}
    },
    [CRUD.HOOK.afterSubmit]() { // 添加之后
      this.addChildDict = false
      this.parentInfo = {}
    },
    // 获取字典结构树
    getdictGroupTree() {
      tree().then(res => {
        if (res && res.data) {
          this.dictGroupTree = res.data
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-input-number .el-input__inner {
    text-align: left;
  }

</style>
